<template>
  <div class="app-container">
    <h3>医院设置添加</h3>

    <el-form
      :model="HospSet"
      :rules="rules"
      ref="HospSet"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="医院名称" prop="hosname">
        <el-input v-model="HospSet.hosname"></el-input>
      </el-form-item>

      <el-form-item label="医院编号" prop="hoscode">
        <el-input v-model="HospSet.hoscode"></el-input>
      </el-form-item>

      <el-form-item label="api基础路径" prop="apiUrl">
        <el-input v-model="HospSet.apiUrl"></el-input>
      </el-form-item>

      <el-form-item label="联系人姓名" prop="contactsName">
        <el-input v-model="HospSet.contactsName"></el-input>
      </el-form-item>

      <el-form-item label="联系人手机" prop="contactsPhone">
        <el-input v-model="HospSet.contactsPhone"></el-input>
      </el-form-item>

      <!-- <el-form-item label="状态" prop="status">
        <el-input v-model="HospSet.status"></el-input>
      </el-form-item> -->

      <el-form-item>
        <el-button
          v-if="this.$route.params.id"
          type="primary"
          @click="updateHospitalSet('HospSet')"
          >立即修改</el-button
        >

        <el-button v-else type="primary" @click="saveHospSet('HospSet')"
          >立即创建</el-button
        >

        <el-button @click="resetForm('HospSet')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import hospset from "@/api/hospset";

export default {
  data() {
    return {
      route_id:"",
      HospSet: {
        hosname: "",
        hoscode: "",
        apiUrl: "http://127.0.0.1:9999",
        contactsName: "",
        contactsPhone: "",
        // status: 0,
      },
      rules: {
        hosname: [
          { required: true, message: "请输入医院名称", trigger: "blur" },
        ],
        hoscode: [
          { required: true, message: "请输入医院编号", trigger: "blur" },
        ],
        apiUrl: [{ required: true, message: "请输入api路径", trigger: "blur" }],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        contactsPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
      },
    };
  },
   created() {
      // 页面渲染之前执行
      // 一般调用method定义的方法，得到数据
      // 获取路由里面的ID值
      // 调用接口得到医院设置信息
      if(this.$route.params && this.$route.params.id) {
          this.route_id = this.$route.params.id;
          // 当页面渲染之前 调用 方法查询出id 信息 使用 es6 方式 赋值给 对象
          this.getHospSet(this.route_id);
      }
    },
 
  methods: {
    // 添加医院设置
    saveHospSet(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          hospset.saveHospSet(this.HospSet).then((response) => {
            // 提示
            this.$message({
              type: "success",
              message: "添加成功",
            });
            // 跳转列表页面 ， 路由跳转方式实现
            this.$router.push({ path: "/hospSet/list" });
          });
        } else {
          console.log("error !!");
          return false;
        }
      });
    },

        // 添加医院设置
    updateHospitalSet(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          hospset.updateHospitalSet(this.HospSet).then((response) => {
            // 提示
            this.$message({
              type: "success",
              message: "修改成功",
            });
            // 跳转列表页面 ， 路由跳转方式实现
            this.$router.push({ path: "/hospSet/list" });
          });
        } else {
          console.log("error !!");
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 根据id查询
    getHospSet(id) {
      hospset.getHospSet(id).then(response => {
        // console.log(response);
        this.HospSet =  response.data;
      })
    }

  },
};
</script>

<style>
</style>